<template>
  <div>
    <el-card class="box-card">
      <div class="BigDiv">
        <el-input class="ElInput" placeholder="请输入类型名称" v-model="facilityClassifyName"></el-input>
        <el-button icon="el-icon-search" type="primary" @click="list"></el-button>
        <el-button type="info" @click="facilityClassifyName = ''">重置</el-button>
        <el-button type="primary" @click="openCreateVisible">添加</el-button>
        <!--表格-->
        <el-table
            :data="tableData"
            height="730"
            border
            style="margin-top: 10px;width: 100%">
          <el-table-column
              prop="facilityClassifyName"
              label="设备分类名称"
              width="180">
          </el-table-column>
          <el-table-column
              prop="status"
              label="状态 "
              width="180">
            <template slot-scope="scope">
                <el-switch
                    style="margin-left: 50px"
                    @change="updateStatus(scope.row)"
                    v-model="scope.row.status"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="0"
                    :inactive-value="1">
                </el-switch>
            </template>
          </el-table-column>
          <el-table-column
              prop="addUserName"
              label="添加人">
          </el-table-column>
          <el-table-column
              prop="createTime"
              label="添加时间">
          </el-table-column>
          <el-table-column
              prop="address"
              label="操作">
            <template slot-scope="scope">
              <span><el-button type="text" @click="openUpdateVisible(scope.row)">修改</el-button></span>
              <span><el-button type="text" @click="openRemoveWindow(scope.row.id)">删除</el-button></span>
            </template>
          </el-table-column>
        </el-table>
        <!--表格-->
      </div>
    </el-card>
    <!--分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :page-size=pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
    </el-pagination>
    <!--分页-->
    <!--弹窗-->
    <el-dialog
        title="修改类型名称"
        :visible.sync="updateVisible"
        width="30%"
        :before-close="handleClose">
      <span>类型名称</span>
      <span>
        <el-input v-model="updateForm.facilityClassifyName" class="ElInput" placeholder="请输入设备类型名称"></el-input>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">修 改</el-button>
      </span>
    </el-dialog>
    <!--弹窗-->
    <!--create弹窗-->
    <el-dialog
        title="添加设备类型"
        :visible.sync="createVisible"
        width="30%"
        :before-close="handleClose">
      <span>类型名称</span>
      <span>
        <el-input v-model="createForm.facilityClassifyName" class="ElInput" placeholder="请输入设备类型名称"></el-input>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="createVisible = false">取 消</el-button>
        <el-button type="primary" @click="create">添 加</el-button>
      </span>
    </el-dialog>
    <!--create弹窗-->
  </div>
</template>

<script>
export default {
  /*Data*/
  data() {
    return {
      createForm:{
        facilityClassifyName:'',
        addUser: '8'
      },
      restForm:{
        facilityClassifyName:'',
        addUser: '8'
      },
      updateForm:{},
      createVisible: false,
      updateVisible: false,
      facilityClassifyName: '',
      tableData: [],
      pageSize: 10,
      pageNum:1,
      total:0,
    }
  },
  /*自动挂载*/
  mounted() {
    this.list()
  },
  /*函数*/
  methods:{
    openCreateVisible() {
      this.createForm = this.restForm
      this.createVisible = true
    },
    create(){
      this.$axios.post('memberZjx/facilityClassify/create',this.createForm).then(res => {
        if (res.data.code === 200){
          this.MyMessage('添加成功','success')
          this.createVisible = false
          this.list()
          this.insertLog('设备分类管理')
        } else {
          this.MyMessage(res.data.obj,'info')
        }
      })
    },
    openRemoveWindow(id) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.remove(id)
      }).catch(() => {
        this.MyMessage('取消删除','info')
      });
    },
    remove(id){
      this.$axios.post('memberZjx/facilityClassify/remove/'+id).then(res => {
        if (res.data.code === 200){
          this.MyMessage('删除','success')
          this.list()
          this.deleteLog('设备分类管理')
        } else {
          this.MyMessage(res.data.obj,'info')
        }
      })
    },
    update(){
      this.$axios.post('memberZjx/facilityClassify/update/'+this.updateForm.id+'/'+this.updateForm.facilityClassifyName).then(res => {
        if (res.data.code === 200){
          this.updateVisible = false
          this.MyMessage('修改成功','success')
          this.list()
          this.updateLog('设备分类管理')
        } else {
          this.MyMessage(res.data.obj,'info')
        }
      })
    },
    openUpdateVisible(data){
      this.updateForm = JSON.parse(JSON.stringify(data))
      this.updateVisible = true
    },
    updateStatus(data) {
      this.$axios.post('memberZjx/facilityClassify/updateStatus/'+data.id+'/'+data.status).then(res => {
        if (res.data.code === 200){
          if (data.status === 0) {
            this.MyMessage('启用成功','success')
          }
          if (data.status === 1) {
            this.MyMessage('停用成功','success')
          }
          this.list()
        } else {
          this.MyMessage(res.data.obj,'info')
        }
      })
    },
    list(){
      this.$axios.get('memberZjx/facilityClassify/list',{
        facilityClassifyName: this.facilityClassifyName,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }).then(res => {
        if (res.data.code === 200){
          this.tableData = res.data.obj.content
          this.total = res.data.obj.total
        } else {
          this.MyMessage(res.data.obj,'info')
        }
      })
    },
    MyMessage (msg, type) {
      this.$notify({
        showClose: true,
        message: msg,
        type: type
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.list()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.list()
    },
    handleClose(done) {
      done()
    },
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
.ElInput{
  width: 200px;
}
.box-card{
  height: 820px;
  margin: 10px;
}
</style>